<%@ page import="java.util.Date" %>
<%@ page import="car.aistar.dto.TqxCarSelect" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/24
  Time: 22:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/buyCar.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/base.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/footer.css">
    <style>
        #buyCar a:first-child{
            color: skyblue;
        }
    </style>
</head>
<body>
<!--nav开始-->
<div id="nav_my"></div>
<br>

<!--nav结束-->
<div>
    <input type="text" class="hidden" value="${pageContext.request.contextPath}" id="path">
    <input type="text" class="hidden" value="${TqxCarSelect.brId}" id="Id_brId">
    <input type="text" class="hidden" value="${TqxCarSelect.csId}" id="Id_csId">
    <input type="text" class="hidden" value="${TqxCarSelect.price}" id="Id_price">
    <input type="text" class="hidden" value="${TqxCarSelect.price1}" id="id_my_price_b">
    <input type="text" class="hidden" value="${TqxCarSelect.price2}" id="id_my_price_e">
    <input type="text" class="hidden" value="${TqxCarSelect.cGear}" id="id_cGear">
    <input type="text" class="hidden" value="${TqxCarSelect.cSeat}" id="id_cSeat">
    <input type="text" class="hidden" value="${TqxCarSelect.cCus}" id="id_cCus">
    <input type="text" class="hidden" value="${TqxCarSelect.cAge}" id="id_cAge">
    <input type="text" class="hidden" value="${TqxCarSelect.csName}" id="id_csName">
    <input type="text" class="hidden" value="${TqxCarSelect.brName}" id="id_brName">
    <input type="text" class="hidden" value="${TqxCarSelect.cMileage}" id="id_cMileage">
    <input type="text" class="hidden" value="${TqxCarSelect.likeStr}" id="id_likeStr">
    <input type="text" class="hidden" value="${TqxCarSelect.orderPrice}" id="id_orderPrice">
    <input type="text" class="hidden" value="${TqxCarSelect.orderFar}" id="id_orderFar">
    <input type="text" class="hidden" value="${TqxCarSelect.orderAge}" id="id_orderAge">
    <input type="text" class="hidden" value="${TqxCarSelect.pageNow}" id="id_pageNow">
    <input type="text" class="hidden" value="${TqxCarSelect.pageSize}" id="id_pageSize">
    <input type="text" class="hidden" value="${TqxCarSelect.pageNums}" id="id_pageNums">

</div>


<!--面包屑 开始-->
<div class="container">
    <div class="row">
        <ul id="buyCar" class="breadcrumb" >
            <li><a href="<%=request.getContextPath()%>/jsp/index/index.jsp">精翼二手车</a></li>
            <li><a href="<%=request.getContextPath()%>/jsp/buyCar/buyCar.jsp">我要买车</a></li>
            <c:if test="${!empty TqxCarSelect.brName}">
                <li><a href="<%=request.getContextPath()%>/carDetail/buyCar/carInfo.action?brId=${TqxCarSelect.brId}&brName=${TqxCarSelect.brName}">${TqxCarSelect.brName}</a></li>
            </c:if>
            <c:if test="${!empty TqxCarSelect.csName}">
                <li><a href="<%=request.getContextPath()%>/carDetail/buyCar/carInfo.action?brId=${TqxCarSelect.brId}&brName=${TqxCarSelect.brName}&csId=${TqxCarSelect.csId}&csName=${TqxCarSelect.csName}">${TqxCarSelect.csName}</a></li>
            </c:if>
        </ul>
        <div style="float: right ;width: 25%;">
            <form class="bs-example bs-example-form" role="form">
                <div class="input-group">
                    <%--                    ${TqxCarSelect.LikeStr}--%>
                    <input type="text" class="form-control" id="searchText"  style="color: yellow" value="">
                    <span class="input-group-addon"  onclick="searchText()">搜索</span>
                </div>
            </form>
        </div>
    </div>
</div>
<!--面包屑 结束-->

<!--筛选 开始-->
<div class="container">
    <div class="row">
        <table class="select">
            <%--            品牌--%>
            <tr class="tr_one">
                <td class="td_one">品牌</td>
                <td>
                    <ul>
                        <li> <a class="on" href="#" tabindex="-1"
                                <c:if test="${TqxCarSelect.brId==null or TqxCarSelect.brId==-1}">style="color: yellow " </c:if>
                                <c:if test="${TqxCarSelect.brId!=null and TqxCarSelect.brId!=-1}">style="color: black " </c:if>
                                onclick="javascript:selectBR(this)">不限</a></li>
                        <c:forEach items="${brands}" var="b" varStatus="status" begin="0" end="7">
                            <li> <a tabindex="${b.id}" name="${b.brName}"
                                    <c:if test="${TqxCarSelect.brId==b.id}">style="color: yellow " </c:if>
                                    <c:if test="${TqxCarSelect.brId!=b.id}">style="color: black " </c:if>
                                    title="${b.brName}二手车" onclick="javascript:selectBR(this)">${b.id}:${b.brName}</a></li>
                        </c:forEach>

                        <li class="li_last">
                            <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">更多</button>
                        </li>
                        <br>
                        <div class="demo collapse" id="demo" class="demo collapse"  aria-expanded="false" style="height: 0">

                            <c:forEach items="${brands}" var="b" varStatus="status" begin="8" end="16">
                                <li> <a tabindex="${b.id}" name="${b.brName}"
                                        <c:if test="${TqxCarSelect.brId==b.id}">style="color: yellow " </c:if>
                                        <c:if test="${TqxCarSelect.brId!=b.id}">style="color: black " </c:if>
                                        title="${b.brName}二手车" onclick="javascript:selectBR(this)">${b.id}:${b.brName}</a></li>
                            </c:forEach>
                        </div>

                    </ul>
                </td>
            </tr>
            <%--车系--%>
            <tr class="tr_two">
                <td class="td_one">车系</td>
                <td>
                    <ul>
                        <li value="-1" ><a tabindex="-1" class="selectedA"
                                           <c:if test="${TqxCarSelect.csId==null or TqxCarSelect.csId==-1}">style="color: yellow " </c:if>
                                           <c:if test="${TqxCarSelect.csId!=null and TqxCarSelect.csId!=-1 }">style="color: black " </c:if>
                                           onclick="javascript:selectCS(this)">不限</a></li>

                        <c:forEach items="${carStyles}" varStatus="status" var="c" begin="0" end="9">
                            <li value=""><a tabindex="${c.id}"  name="${c.stName}"
                                            <c:if test="${TqxCarSelect.csId==c.id}">style="color: yellow " </c:if>
                                            <c:if test="${TqxCarSelect.csId!=c.id}">style="color: black " </c:if>
                                            onclick="javascript:selectCS(this)">${c.brId}:${c.stName}</a></li>
                        </c:forEach>

                        <li class="li_last">
                            <button type="button" class="btn btn-info btn-default collapsed" data-toggle="collapse" data-target="#demo2" aria-expanded="false">更多</button>
                        </li>
                        <br>
                        <div class="demo collapse" id="demo2" class="demo collapse"  aria-expanded="false" style="height: 0">
                            <c:forEach items="${carStyles}" varStatus="status" var="c" begin="10" end="150">
                                <li value=""><a tabindex="${c.id}"  name="${c.stName}"
                                                <c:if test="${TqxCarSelect.csId==c.id}">style="color: yellow " </c:if>
                                                <c:if test="${TqxCarSelect.csId!=c.id}">style="color: black " </c:if>
                                                onclick="javascript:selectCS(this)">${c.brId}:${c.stName}</a></li>
                            </c:forEach>
                        </div>
                    </ul>
                </td>
            </tr>
            <%--价格--%>
            <tr class="tr_three">
                <td class="td_one">价格</td>
                <td>
                    <ul>
                        <li><a tabindex="-1" onclick="javascript:selectPrice(this)"   <c:if test="${TqxCarSelect.price==null or TqxCarSelect.price==-1}">style="color: yellow " </c:if>
                               <c:if test="${TqxCarSelect.csId!=null or TqxCarSelect.csId!=-1}">style="color: black " </c:if>>
                            不限</a></li>
                        <li><a tabindex="3" onclick="javascript:selectPrice(this)" <c:if test="${TqxCarSelect.price==3}"> style="color: yellow " > </c:if>>
                                3万以下</a></li>
                        <li><a tabindex="5" onclick="javascript:selectPrice(this)" <c:if test="${TqxCarSelect.price==5}"> style="color: yellow " > </c:if>>5万以下</a></li>
                        <li><a tabindex="7" onclick="javascript:selectPrice(this)"   <c:if test="${TqxCarSelect.price==7}"> style="color: yellow " > </c:if>> 7万以下</a></li>
                        <li  ><a tabindex="9" onclick="javascript:selectPrice(this)"  <c:if test="${TqxCarSelect.price==9}"> style="color: yellow " > </c:if>> 9万以下</a></li>
                        <li  ><a tabindex="12" onclick="javascript:selectPrice(this)" <c:if test="${TqxCarSelect.price==12}"> style="color: yellow " > </c:if>> 12万以下</a></li>
                        <li  ><a tabindex="16" onclick="javascript:selectPrice(this)" <c:if test="${TqxCarSelect.price==16}"> style="color: yellow " > </c:if>> 16万以下</a></li>
                        <li ><a tabindex="17"  onclick="javascript:selectPrice(this)"  <c:if test="${TqxCarSelect.price==17}"> style="color: yellow " > </c:if>> 16万以上</a></li>
                        <li>
                            <label>
                                <input type="text" value="${TqxCarSelect.price1}" data-default-value="0" size="4" class="js-begin" maxlength="3" id="my_price_b" name="b">
                            </label>
                            <label><i class="input-line">-</i></label>
                            <label>
                                <input type="text" value="${TqxCarSelect.price2}" data-default-value="999" size="4" class="js-end" maxlength="3" id="my_price_e" name="e">
                            </label>
                            <label class="input-unit">万</label>
                            <label><a gjalog="" onclick="javascript:selectPriceMiddle()" class="input-btn js-btn">筛选</a></label>

                        </li>

                    </ul>
                </td>
            </tr>

            <tr class="tr_four">
                <td class="td_one">更多</td>

                <td>
                    <ul>
                        <li>
                            <%-- 变速箱--%>
                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown">
                                    <span>
                                     <c:if test="${empty TqxCarSelect.cGear or TqxCarSelect.cGear=='' or TqxCarSelect.cGear=='null' }">变速箱 <span class="caret"></span></c:if>
                                    <c:if test="${!empty TqxCarSelect.cGear  and TqxCarSelect.cGear!='' and TqxCarSelect.cGear!='null' }">
                                        <span style="color: yellow">${TqxCarSelect.cGear} </span><span class="caret"></span>
                                    </c:if>
                                    </span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation" value="-1">
                                        <a role="menuitem" tabindex="-1" name=null onclick="javascript:selectGear(this)">不限</a>
                                    </li>
                                    <c:forEach items="${cGears}" var="c" varStatus="status">
                                        <li role="presentation" value="">
                                            <a role="menuitem" tabindex="${status.count}" name="${c}" onclick="javascript:selectGear(this)">${c}</a>
                                        </li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </li>

                        <%--燃油类型--%>
                        <li>
                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle" id="dropdownMenu8" data-toggle="dropdown">
                                    <c:if test="${empty TqxCarSelect.cCus or TqxCarSelect.cCus=='' or TqxCarSelect.cCus=='null' }">燃油类型<span class="caret"></span></c:if>
                                    <c:if test="${!empty TqxCarSelect.cCus and TqxCarSelect.cCus!='' and TqxCarSelect.cCus!='null'}">
                                        <span style="color: yellow">${TqxCarSelect.cCus} </span><span class="caret"></span>
                                    </c:if>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" name=null onclick="javascript:selectCus(this)">不限</a>
                                    </li>
                                    <c:forEach items="${cCus}" varStatus="status" var="cc">
                                        <li role="presentation">
                                            <a role="menuitem" tabindex="${status.count}" name="${cc}" onclick="javascript:selectCus(this)">${cc}</a>
                                        </li>
                                    </c:forEach>

                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle" id="dropdownMenu5" data-toggle="dropdown">
                                    <c:if test="${empty TqxCarSelect.cMileage or TqxCarSelect.cMileage ==0}">里程 <span class="caret"></span></c:if>
                                    <c:if test="${ TqxCarSelect.cMileage!=9 and  TqxCarSelect.cMileage>0}"><span style="color: yellow">${TqxCarSelect.cMileage}万公里以内 </span><span class="caret"></span></c:if>
                                    <c:if test="${ TqxCarSelect.cMileage==9}"><span style="color: yellow">${TqxCarSelect.cMileage}万公里以上</span><span class="caret"></span></c:if>

                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" onclick="javascript:selectFar(this)">不限</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="1" onclick="javascript:selectFar(this)">1万公里以内</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="3" onclick="javascript:selectFar(this)">3万公里以内</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="5" onclick="javascript:selectFar(this)">5万公里以内</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="8" onclick="javascript:selectFar(this)">8万公里以内</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex=9" onclick="javascript:selectFar(this)">8万公里以上 </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle" id="dropdownMenu3" data-toggle="dropdown">
                                    <c:if test="${empty TqxCarSelect.cAge or TqxCarSelect.cAge ==0}">车龄 <span class="caret"></span></c:if>
                                    <c:if test="${ TqxCarSelect.cAge!=9 and  TqxCarSelect.cAge>0}"><span style="color: yellow">${TqxCarSelect.cAge}年以内 </span> <span class="caret"></span></c:if>
                                    <c:if test="${ TqxCarSelect.cAge==9}"><span style="color: yellow">${TqxCarSelect.cAge}年以上 </span> <span class="caret"></span></c:if>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" onclick="javascript:selectAge(this)">不限  </a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="1" onclick="javascript:selectAge(this)">1年以内</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="3" onclick="javascript:selectAge(this)">3年以内 </a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="4" onclick="javascript:selectAge(this)">5年以内  </a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="8" onclick="javascript:selectAge(this)">8年以内 </a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="9" onclick="javascript:selectAge(this)">8年以上 </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">座位
                                    <%--                                    <c:if test="${empty TqxCarSelect.cSeat or TqxCarSelect.cSeat ==0}"></c:if>--%>
                                    <c:if test="${ TqxCarSelect.cSeat!=7 and  TqxCarSelect.cSeat>0}">
                                        <span style="color: yellow">${TqxCarSelect.cSeat}座 </span>
                                    </c:if>
                                    <c:if test="${ TqxCarSelect.cSeat==7}">
                                        <span style="color: yellow">>${TqxCarSelect.cSeat}座以上</span
                                    </c:if>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="-1" onclick="javascript:selectSeat(this)">不限</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="2" onclick="javascript:selectSeat(this)">2座</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="4" onclick="javascript:selectSeat(this)">4座</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="5" onclick="javascript:selectSeat(this)">5座</a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="6" onclick="javascript:selectSeat(this)">6座 </a>
                                    </li>
                                    <li role="presentation">
                                        <a role="menuitem" tabindex="7" onclick="javascript:selectSeat(this)"> 7座及以上</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </td>
            </tr>
        </table>
        <br>
        <p style="margin-top: 5px">在 "苏州二手车" 中为您找到${TqxCarSelect.pageNums}辆好车</p>
        <br>
    </div>
</div>
<!--筛选 结束-->

<!--缩略图开始-->
<div class="container">
    <div class="row carcc">
        <ul class="nav nav-pills">
            <li class="first" style="background-color: #f5f5f5"><a>全部</a></li>
        </ul>

        <ul class="up">
            <li style=" width: 6%;">
                <input type="checkbox" id="Or_age"onclick="orderByAgeBox()"<c:if test="${!empty TqxCarSelect.orderAge}">checked</c:if> >
                <label >车龄</label>
                <i     style="color: skyblue"
                        <c:if test="${TqxCarSelect.orderAge==1  }"> class="glyphicon glyphicon-arrow-up"</c:if>
                        <c:if test="${TqxCarSelect.orderAge==-1 or TqxCarSelect.orderAge==null}"> class="glyphicon glyphicon-arrow-down"</c:if>
                       tabindex="1" onclick="orderByAge()"></i>

            </li>
            <li>|</li>
            <li style="  width:6%;">
                <input type="checkbox" id="Or_far" onclick="orderByFarBox()" <c:if test="${!empty TqxCarSelect.orderFar}">checked</c:if>>
                <label>里程</label>
                <i     style="color: skyblue"
                        <c:if test="${TqxCarSelect.orderFar==1 }"> class="glyphicon glyphicon-arrow-up"</c:if>
                        <c:if test="${TqxCarSelect.orderFar==-1 or TqxCarSelect.orderFar==null }"> class="glyphicon glyphicon-arrow-down"</c:if>
                       tabindex="1" onclick="orderByFar()"></i>
            </li>
            <li>|</li>
            <li style="width: 6%;" >
                <input type="checkbox" id="Order_price"  onclick="orderByPriceBox()" <c:if test="${!empty TqxCarSelect.orderPrice}">checked</c:if> >
                <label >价格 </label>
                <i     style="color: skyblue"
                        <c:if test="${TqxCarSelect.orderPrice==1  }"> class="glyphicon glyphicon-arrow-up"</c:if>
                        <c:if test="${TqxCarSelect.orderPrice==-1 or TqxCarSelect.orderPrice==null}"> class="glyphicon glyphicon-arrow-down"</c:if>
                       id="or_price" tabindex="1" onclick="orderByPrice()"></i>
            </li>
        </ul>
        <br>
        <hr>
        <c:if test="${TqxCarSelect.pageNums==0}">
            <h1>sorry 未查询到车辆信息 </h1>
            <div style="height: 500px; text-align: center;">
                <img src="<%=request.getContextPath()%>/images/sorry.jpg" alt="">

            </div>

        </c:if>
        <c:if test="${TqxCarSelect.pageNums!=0}">
            <c:forEach var="c" items="${page.list}" begin="0" end="11">
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img src="${c.picUrl}"
                             alt="" style="width: 80%;">
                        <div class="caption car_info ">
                            <a href="${pageContext.request.contextPath}/cardetail/infor.action?id=${c.cId}" style="text-decoration: none">${c.brName}${c.stName}&nbsp;&nbsp;<fmt:formatDate value='${c.creatDate}' pattern='yyyy'/>款  ${c.cGear}${c.cDrive}</a>
                            <span>    车龄:${c.cAge}年 |里程: ${c.miles}万公里</span>
                            <br>
                            <p style="margin-top: 5px">价格${c.price}万&nbsp;&nbsp;<del class="text-danger">15.5万</del></p>
                        </div>
                    </div>
                </div>

            </c:forEach>
            <div class="container">
                <div class="row" style="text-align: center">
                    <div id="page">

                    </div>
                </div>
            </div>
        </c:if>



    </div>
</div>
<!--缩略图结束-->

<!--</div>-->
<!--分页开始-->

<!--分页结束-->


<!--footer-->
<div id="footer">

</div>
<!--footer-->

<script>

    $(function(){
        $("#nav_my").load("${pageContext.request.contextPath}/jsp/common/nav.jsp");
        $("#page").load('${pageContext.request.contextPath}/jsp/page/buyCarpage.jsp?pageNow=${TqxCarSelect.pageNow}&pageSize=${TqxCarSelect.pageSize}&pageNums=${TqxCarSelect.pageNums}');

        $("#footer").load("${pageContext.request.contextPath}/jsp/common/footer.jsp");
    })
</script>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/js/buyCar.js"></script>
</body>
</html>

